<template>
  <el-dialog
    title="角色权限设置"
    v-model="visible"
    :width="500"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-tabs tab-position="top" @tab-change="changeTab">
      <el-tab-pane label="菜单权限">
        <div class="treeMain">
          <el-tree
            ref="menu"
            node-key="id"
            :data="menu.list"
            :props="menu.props"
            highlight-current
            show-checkbox
            :expand-on-click-node="false"
          ></el-tree>
        </div>
      </el-tab-pane>
      <el-tab-pane label="数据权限">
        <el-form label-width="100px" label-position="right">
          <el-form-item label="规则类型">
            <el-select v-model="data.dataType" placeholder="请选择">
              <el-option label="全部可见" :value="0"></el-option>
              <el-option label="本人可见" :value="1"></el-option>
              <el-option label="本部门可见" :value="2"></el-option>
              <el-option label="所在部门及子级可见" :value="3"></el-option>
              <el-option label="选择的部门可见" :value="4"></el-option>
              <!--   <el-option label="自定义" value="5"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="选择部门" v-show="data.dataType == 4">
            <div class="treeMain" style="width: 100%">
              <el-tree
                ref="dept"
                node-key="id"
                :data="data.list"
                :props="data.props"
                show-checkbox
              ></el-tree>
            </div>
          </el-form-item>
          <el-form-item label="规则值" v-show="data.dataType == '6'">
            <el-input
              v-model="data.rule"
              clearable
              type="textarea"
              :rows="6"
              placeholder="请输入自定义规则代码"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="控制台模块">
        <div class="treeMain">
          <el-tree
            ref="grid"
            node-key="id"
            :data="grid.list"
            :props="grid.props"
            :default-checked-keys="grid.checked"
            show-checkbox
          ></el-tree>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="控制台">
        <el-form label-width="100px" label-position="right">
          <el-form-item label="控制台视图">
            <el-select v-model="dashboard" placeholder="请选择">
              <el-option
                v-for="item in dashboardOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 12px">{{
                  item.views
                }}</span>
              </el-option>
            </el-select>
            <div class="el-form-item-msg">用于控制角色登录后控制台的视图</div>
          </el-form-item>
        </el-form>
      </el-tab-pane> -->
    </el-tabs>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
import { resetTree } from "@/utils/resetTree"
export default {
  emits: ["success", "closed"],
  data () {
    return {
      visible: false,
      isSaveing: false,
      roleId: null, //角色id
      menu: {
        list: [],
        checked: [],
        props: {
          label: (data) => {
            return data.meta.title
          },
        },
      },
      grid: {
        list: [],
        checked: [],
        props: {
          label: (data) => {
            return data.modName
          },
          disabled: (data) => {
            return data.isFixed
          },
        },
      },
      data: {
        //数据权限
        dataType: 0,
        list: [],
        checked: [],
        props: {
          label: (data) => {
            return data.name
          },
        },
        rule: "",
      },
      dashboard: "0",
      dashboardOptions: [
        {
          value: "0",
          label: "数据统计",
          views: "stats",
        },
        {
          value: "1",
          label: "工作台",
          views: "work",
        },
      ],
    }
  },
  mounted () {
    this.getGrid()
  },
  methods: {
    open (val) {
      this.visible = true
      this.roleId = val.id
      this.data.dataType = val.dataAuthType
      this.getMenu()
    },
    async submit () {
      this.isSaveing = true

      //选中的和半选的合并后传值接口
      // 菜单
      var checkedKeys = this.$refs.menu
        .getCheckedKeys()
        .concat(this.$refs.menu.getHalfCheckedKeys())

      // 部门
      var checkedKeys_dept = this.$refs.dept
        .getCheckedKeys()
        .concat(this.$refs.dept.getHalfCheckedKeys())

      // 控制台模块
      let checkedGrid = this.$refs.grid
        .getCheckedKeys()
        .concat(this.$refs.grid.getHalfCheckedKeys())

      let param = {
        dateType: this.data.dataType,
        menuIds: checkedKeys.join(","),
        modIds: checkedGrid.join(","),
        roleId: this.roleId,
        departmentIds: checkedKeys_dept.join(","),
      }
      if (checkedKeys.length == 0) {
        this.$message.warning(`请设置菜单权限`)
        return
      }
      let res = await this.$API.role.setPermission.post(param)

      if (res.code == 200) {
        this.isSaveing = false
        this.visible = false
        this.$message.success("操作成功")
        this.$emit("success")
      }
    },

    // 获取菜单列表
    async getMenu () {
      // 获取全部菜单
      let allData = await this.$API.menu.getMenus.get()
      this.menu.list = resetTree(allData.data, "")

      // 获取角色已有菜单
      let checkeData = await this.$API.role.getRoleMenu.get({ roleId: this.roleId })

      //获取接口返回的之前选中的和半选的合并，处理过滤掉有叶子节点的key
      this.menu.checked = checkeData.data
      this.$nextTick(() => {
        let filterKeys = this.menu.checked.filter((key) =>
          this.$refs.menu.getNode(key) ? this.$refs.menu.getNode(key).isLeaf : null
        )
        this.$refs.menu.setCheckedKeys(filterKeys, true)
      })
    },

    // 获取部门
    async getDept () {
      // 获取全部部门
      var allData = await this.$API.department.getDepartmentList.get()
      this.data.list = allData.data

      // 获取角色已有部门
      let checkData = await this.$API.role.getRoleDepartment.get({ roleId: this.roleId })
      this.data.checked = checkData.data
      this.$nextTick(() => {
        let filterKeys = this.data.checked.filter(
          (key) => this.$refs.dept.getNode(key).isLeaf
        )
        this.$refs.dept.setCheckedKeys(filterKeys, true)
      })
    },

    // 获取控制台列表
    async getGrid () {
      // 获取所有控制台
      let gridList = await this.$API.role.getGridList.get()
      this.grid.list = gridList.data
      // 获取角色已有控制台
      let roleGridList = await this.$API.role.getRoleGridList.get({ roleId: this.roleId })
      let r_list = roleGridList.data
      let list = []
      if (r_list != null) {
        r_list.forEach((item) => {
          list.push(item.modId)
        })
      }
      this.grid.checked = list
    },

    changeTab (val) {
      if (val == 1) this.getDept()
    },
  },
};
</script>

<style scoped>
.treeMain {
  height: 280px;
  overflow: auto;
  border: 1px solid #dcdfe6;
  margin-bottom: 10px;
}
</style>
